<template>
  <div>
    <div class="colorBox" ref="bgc"></div>
    <div>
      R:<input type="range" v-model="obj.value1"  max="250" />
      G:<input type="range" v-model="obj.value2"   max="250" />
      B:<input type="range" v-model="obj.value3"  max="250" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: {
        value1: 50,
        value2: 50,
        value3: 50
      }
    }
  },
  watch: {
    obj: {
      immediate: true,
      deep: true,
      handler (newval) {
        this.$refs.bgc.style.backgroundColor = `rgba(${newval.value1},${newval.value2},${newval.value3},.9)`
      }
    }
  },
  mounted () {
    this.$refs.bgc.style.backgroundColor = `rgba(${this.obj.value1},${this.obj.value2},${this.obj.value3},.9)`
  }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
